<template>
  <el-container class="home-container">
    <el-header height="40px">
      <!--   头部区域   -->
      <div class="logo">
        <dv-decoration-3 style="width:300px;height:30px;position: absolute;left: 10%;"/>
        <dv-decoration-3 style="width:300px;height:30px;position: absolute;right: 10%;"/>
        <dv-decoration-7
            style="width:500px;height:30px;position: absolute;left: 34%;top: 10px; color: #fff;font-size: 25px">
          驾驶行为异常分析及预警系统管理后台
        </dv-decoration-7>
      </div>
      <div class="set" @mousemove="setb" @mouseout="setn"><span>系统设置</span>
        <div id="set1">
          <div class="set11" @click="logout">退出登录</div>
          <div class="set12">修改密码</div>
        </div>
      </div>
      <!--   下拉菜单区域   -->
      <div class="menu">
        <div class="menub1" @click="gohome"><span>首页</span></div>
        <div class="menub2" @mousemove="menub2b" @mouseout="menub2n"><span>车辆管理</span>
          <div id="menub2">
            <div class="menub21">
              <router-link to="/register" style="color:#fff;text-decoration: none">车辆登记</router-link>
            </div>
            <div class="menub22">车辆轨迹</div>
          </div>
        </div>
        <div class="menub3" @mousemove="menub3b" @mouseout="menub3n"><span>司机管理</span>
          <div id="menub3">
            <div class="menub31">
              <router-link to="/registration" style="color:#fff;text-decoration: none">司机登记</router-link>
            </div>
            <div class="menub32">日常考核</div>
          </div>
        </div>
        <div class="menub4" @mousemove="menub4b" @mouseout="menub4n"><span>行为分析管理</span>
          <div id="menub4">
            <div class="menub41">实时行为</div>
            <div class="menub42">
              <router-link to="/conduct" style="color:#fff;text-decoration: none">行为统计分析</router-link>
            </div>
          </div>
        </div>
        <div class="menub5"><span>综合统计分析</span></div>
        <div class="menub6" @mousemove="menub6b" @mouseout="menub6n"><span>系统管理</span>
          <div id="menub6">
            <div class="menub61">角色管理</div>
            <div class="menub62">用户管理</div>
            <div class="menub63">权限分配</div>
            <div class="menub64">单位基本信息</div>
          </div>
        </div>
      </div>
    </el-header>
    <!--  中心内容区域  -->
    <el-main>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    gohome() {
      window.sessionStorage.clear()
      this.$router.push('/welcome')
    },
    setb() {
      var set1 = document.getElementById('set1');
      set1.style.display = 'block';
    },
    setn() {
      var set1 = document.getElementById('set1');
      set1.style.display = 'none';
    },
    menub2b() {
      var menub2 = document.getElementById('menub2');
      menub2.style.display = 'block';
    },
    menub2n() {
      var menub2 = document.getElementById('menub2');
      menub2.style.display = 'none';
    },
    menub3b() {
      var menub3 = document.getElementById('menub3');
      menub3.style.display = 'block';
    },
    menub3n() {
      var menub3 = document.getElementById('menub3');
      menub3.style.display = 'none';
    },
    menub4b() {
      var menub4 = document.getElementById('menub4');
      menub4.style.display = 'block';
    },
    menub4n() {
      var menub4 = document.getElementById('menub4');
      menub4.style.display = 'none';
    },
    menub6b() {
      var menub6 = document.getElementById('menub6');
      menub6.style.display = 'block';
    },
    menub6n() {
      var menub6 = document.getElementById('menub6');
      menub6.style.display = 'none';
    }
  }
}
</script>

<style Lang="less" scoped>

.home-container {
  height: 100%;
}

.logo {
  height: 30px;
}

.set {
  position: absolute;
  width: 100px;
  height: 30px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  top: 3%;
  right: 1.5%;
  z-index: 3;
  text-align: center;
  border: 2px solid #4f7f9c;
  padding: 5px 10px;
  border-radius: 10px;
}

#set1 {
  position: relative;
  width: 120px;
  top: -20px;
  right: 10%;
  font-size: 20px;
  color: #fff;
  border: 2px solid #4f7f9c;
  margin-top: 32px;
  display: none;
  border-radius: 10px;
  cursor: pointer;
}

.set11, .set12 {
  border: 2px solid #4f7f9c;
  padding: 2px 10px;
  margin: 10px 5px;
  border-radius: 10px;
}

.menu {
  position: absolute;
  margin: 0 auto;
  text-align: center;
  padding-top: 40px;
  width: 100%;
  height: 90px;
  z-index: 2;
}

.menub1, .menub2, .menub3, .menub4, .menub5, .menub6 {
  float: left;
  margin-left: 6.5%;
  line-height: 30px;
  border-radius: 10px;
  padding: 5px 10px;
  width: 100px;
  height: 30px;
  font-size: 20px;
  color: #fff;
  border: 2px solid #4f7f9c;
  cursor: pointer;
}

.menub1 {
  width: 60px;
}

.menub4, .menub5 {
  width: 140px;
}

#menub2, #menub3, #menub4, #menub6 {
  width: 120px;
  margin-left: -12px;
  border: 2px solid #4f7f9c;
  margin-top: 9px;
  border-radius: 10px;
  display: none;
}

#menub4 {
  width: 160px;
}

.menub21, .menub22, .menub31, .menub32, .menub41, .menub42, .menub61, .menub62, .menub63, .menub64 {
  border: 2px solid #4f7f9c;
  padding: 2px 10px;
  margin: 10px 5px;
  border-radius: 10px;
}

.set:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.set11:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.set12:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub1:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub2:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub3:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub4:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub5:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub6:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub21:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub22:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub31:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub32:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub41:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub42:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub61:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub62:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub63:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.menub64:hover {
  box-shadow: 0 0 15px #00b7ee;
}

.el-main {
  position: relative;
  margin-top: 85px;
  height: 80%;
  width: 100%;
  overflow-y: scroll;
  z-index: 1;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px;
  background-color: #2E2733;
  border-radius: 10px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-linear-gradient(90deg,
  rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 25%,
  transparent 100%,
  rgba(0, 0, 0, 1) 75%,
  transparent)
}

.el-menu.el-menu--horizontal {
  border: none;
}

</style>
